<template>
    <div class="app-container home">
        <!-- 统计数据 -->
        <div class="wood-statis">
            <div class="index-title">
                <span>交易统计</span>
            </div>
            <el-row :gutter="18">
                <template v-for="(v, i) in statis">
                    <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" :key="i">
                        <div class="statis-item" :class="v.name">
                            <div class="statis-title">{{ v.title }}</div>
                            <div class="statis-num">
                                <b>{{ v.num }}</b>
                                <span>{{
                                    v.name.includes("cube") ? "m³" : "万元"
                                }}</span>
                            </div>
                            <i :class="`iconfont ${v.icon}`"></i>
                        </div>
                    </el-col>
                </template>
            </el-row>
        </div>

        <!-- 常用功能 -->
        <div class="wood-tools">
            <!-- 功能预警 -->
            <div class="wood-warning">
                <div class="index-title">
                    <span>木业交易功能预警</span>
                </div>
                <el-row class="menu-list">
                    <template v-for="(v, i) in warning">
                        <el-col
                            class="menu-item"
                            :xl="4"
                            :lg="4"
                            :md="6"
                            :xs="12"
                            :key="i"
                        >
                            <i :class="`iconfont ${v.icon}`"></i>
                            <div class="warning-item">{{ v.title }}</div>
                        </el-col>
                    </template>
                </el-row>
            </div>

            <!-- 常用功能 -->
            <div class="wood-menu">
                <div class="index-title">
                    <span>常用功能</span>
                </div>

                <template v-for="(rows, index) in menus">
                    <el-row class="menu-list" :key="index">
                        <template v-for="(v, i) in rows">
                            <el-col
                                class="menu-item"
                                :xl="4"
                                :lg="4"
                                :md="6"
                                :xs="12"
                                :key="i"
                            >
                                <i :class="`iconfont ${v.icon}`"></i>
                                <div class="warning-item">{{ v.title }}</div>
                            </el-col>
                        </template>
                    </el-row>
                </template>
            </div>
        </div>

        <!-- 数据 -->
        <div class="wood-data">
            <div class="wood-data-item">
                <div id="LineChart" class="chart"></div>
            </div>
            <div class="wood-data-item">
                <div id="PieChart" class="chart"></div>
            </div>
        </div>

        <!-- <img :src="img.navbar" alt="" /> -->
    </div>
</template>

<script>
let echarts = require("echarts");

export default {
    name: "index",
    data() {
        return {
            img: {
                navbar: require("@/assets/images/navbar.png"),
            },
            // 交易统计
            statis: [
                {
                    title: "采购入库总方数",
                    num: "97336.49",
                    name: "cube-in",
                    icon: "iconfont-a-zujian71",
                },
                {
                    title: "采购入库总金额",
                    num: "1959.23",
                    name: "money-in",
                    icon: "iconfont-qiandai",
                },
                {
                    title: "销售出库总方数",
                    num: "2160.25",
                    name: "cube-out",
                    icon: "iconfont-a-zujian81",
                },
                {
                    title: "销售出库总金额",
                    num: "578.51",
                    name: "money-out",
                    icon: "iconfont-qiandai",
                },
            ],
            // 木业交易预警
            warning: [
                {
                    title: "入库审核",
                    icon: "",
                    num: 0,
                    icon: "iconfont-a-zujian441",
                },
                {
                    title: "出库审核",
                    icon: "",
                    num: 0,
                    icon: "iconfont-a-zujian441",
                },
                {
                    title: "库龄预警",
                    icon: "",
                    num: 0,
                    icon: "iconfont-a-zujian451",
                },
                {
                    title: "库件预警",
                    icon: "",
                    num: 0,
                    icon: "iconfont-a-zujian451",
                },
            ],
            // 木业交易预警
            menus: [
                [
                    { title: "实时库存", icon: "iconfont-a-zujian91" },
                    { title: "在途库存", icon: "iconfont-a-zujian391" },
                    { title: "库存汇报", icon: "iconfont-a-zujian281" },
                    { title: "采购合同", icon: "iconfont-a-zujian401" },
                    { title: "采购入库", icon: "iconfont-a-zujian71" },
                    { title: "销售出库", icon: "iconfont-a-zujian81" },
                ],
                [
                    { title: "收款单据", icon: "iconfont-a-zujian411" },
                    { title: "付款单据", icon: "iconfont-a-zujian421" },
                    { title: "核销单据", icon: "iconfont-a-zujian341" },
                ],
            ],
        };
    },
    created() {},
    mounted() {
        let LineChart = this.drawLineChart();
        let PieChart = this.drawPieChart();

        window.onresize = () => {
            LineChart.resize();
            PieChart.resize();
        };

        this.$nextTick(() => {
            LineChart.resize();
            PieChart.resize();
        });
    },
    destroyed() {
        window.onresize = null;
    },
    methods: {
        drawLineChart() {
            let myChart = echarts.init(document.getElementById("LineChart"));

            // 绘制图表
            myChart.setOption({
                xAxis: {
                    type: "category",
                    data: [
                        "刘XX",
                        "松堡木业",
                        "宋XX",
                        "吕XX",
                        "张**",
                        "李xx",
                        "吴xx",
                        "陈xx",
                        "张xx",
                        "李xx",
                    ],
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: true,
                    },
                },
                series: [
                    {
                        data: [
                            500, 1200, 1400, 2000, 2600, 1350, 1600, 800, 1000,
                            1200, 600,
                        ],
                        type: "bar",
                        showBackground: false,
                        barWidth: "40%",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "#7CB5EC" },
                                    { offset: 1, color: "#5B8FD4" },
                                ]
                            ),
                            barBorderRadius: [3, 3, 0, 0],
                        },
                    },
                ],
            });

            return myChart;
        },
        drawPieChart() {
            let myChart = echarts.init(document.getElementById("PieChart"));
            myChart.setOption({
                color: [
                    "#5B8FD4",
                    "#FFD703",
                    "#47C056",
                    "#FD8101",
                    "#8F82BC",
                    "#00B7EE",
                ],
                legend: {
                    bottom: "5%",
                    right: "2%",
                    orient: "vertical",
                    itemWidth: 6,
                    itemHeight: 6,
                    borderCap: "round",
                    textStyle: {
                        color: "#333",
                    },
                },
                tooltip: {
                    position: [0, 0],
                    trigger: "item",
                    backgroundColor: "transparent",
                    formatter: `
                            <div class="bar-tooltip">
                                <div>{b}</div>
                                <span>{a} : {c} m³</span>
                            </div>
                        `,
                },
                series: [
                    {
                        startAngle: 120,
                        name: "库龄",
                        type: "pie",
                        radius: ["40%", "70%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: "outside",
                            formatter: "{b}:{d}%",
                        },
                        // emphasis: {
                        //     label: {
                        //         show: true,
                        //         fontSize: "14",
                        //         fontWeight: "bold",
                        //         formatter: "{d}%",
                        //     },
                        // },
                        labelLine: {
                            show: true,
                            showAbove: true,
                        },
                        // emphasis: {
                        //     label: {
                        //         show: true,
                        //         position: "center",
                        //         color: "#000",
                        //     },
                        // },
                        data: [
                            { value: 1048, name: "0~2月" },
                            { value: 735, name: "2~3月" },
                            { value: 580, name: "3~4月" },
                            { value: 484, name: "4~5月" },
                            { value: 300, name: "5~6月" },
                            { value: 100, name: "6月以上" },
                        ],
                    },
                    // {
                    //     startAngle: 120,
                    //     name: "库龄2",
                    //     type: "pie",
                    //     radius: ["40%", "70%"],
                    //     avoidLabelOverlap: false,
                    //     label: {
                    //         show: false,
                    //         position: "center",
                    //         formatter: "{d}%",
                    //     },
                    //     emphasis: {
                    //         label: {
                    //             show: true,
                    //             position: "center",
                    //             color: "#000",
                    //         },
                    //     },
                    //     data: [
                    //         { value: 1048, name: "0~2月" },
                    //         { value: 735, name: "2~3月" },
                    //         { value: 580, name: "3~4月" },
                    //         { value: 484, name: "4~5月" },
                    //         { value: 300, name: "5~6月" },
                    //         { value: 200, name: "6月以上" },
                    //     ],
                    // },
                ],
            });
            return myChart;
        },
    },
};
</script>

<style scoped lang="scss">
.home {
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: calc(100vh - 85px);
    background: #f5f5f5;
    overflow: auto;
    img {
        width: 100%;
        height: 100%;
    }

    .index-title {
        position: relative;
        padding: 0 0 0 15px;
        height: 30px;
        font-size: 19px;
        font-weight: bold;
        color: #333;

        ::after {
            content: "";
            position: absolute;
            left: 2px;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 4px;
            height: 24px;
            background: #5b8fd4;
        }
    }

    .wood-statis {
        .index-title {
            margin-bottom: 5px;
        }
        .statis-item {
            position: relative;
            margin: 5px 0;
            padding: 20px 30px 15px 30px;
            height: 138px;
            color: #fff;
            flex: 1;
            border-radius: 5px;

            &.cube-in {
                background: #f8bb39;
            }
            &.money-in {
                background: #5b8fd4;
            }
            &.cube-out {
                background: #47c056;
            }
            &.money-out {
                background: #fc8556;
            }

            &.money-in,
            &.money-out {
                i {
                    right: 10px;
                    bottom: -10px;
                    font-size: 128px;
                }
            }

            .statis-title {
                font-size: 18px;
            }

            .statis-num {
                margin-top: 16px;
                font-size: 34px;

                & > span {
                    margin-left: 10px;
                    display: inline-block;
                    font-size: 18px;
                }
            }

            i {
                position: absolute;
                right: 18px;
                bottom: 0;
                font-size: 112px;
                opacity: 0.3;
            }
        }
    }

    .wood-menu {
        margin-top: 12px;
    }

    .wood-data {
        padding-top: 25px;
        flex: 1;
        display: flex;

        .wood-data-item {
            flex: 1;
            height: 100%;
            min-height: 240px;
            background: #fff;
            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
            border-radius: 5px;
            & + .wood-data-item {
                margin-left: 18px;
            }

            .chart {
                width: 100%;
                height: 100%;
            }
        }
    }

    .wood-tools {
        margin-top: 18px;
        padding: 20px 20px;
        background: #fff;
        box-shadow: 0px 0px 33px 0px rgba(0, 0, 0, 0.14);
        border-radius: 6px;
    }

    .menu-list {
        & + .menu-list {
            border-top: 1px solid #ccc;
        }

        .menu-item {
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 16px;
            color: #5b8fd4;
            & + .menu-item {
                border-left: 1px solid #ccc;
            }

            i {
                margin-right: 10px;
                display: inline-block;
                font-size: 24px;
            }
        }
    }

    @media screen and (max-width: 1000px) {
        & {
            padding: 15px;
        }
        .wood-data {
            flex-direction: column;
            .wood-data-item {
                width: 100%;
                & + .wood-data-item {
                    margin-top: 18px;
                    margin-left: 0;
                }
            }
        }
    }
}
</style>

